import { createSlice } from '@reduxjs/toolkit';
import { device } from '@/utils/constant';

export interface screenStateT {
    screenWidth: number | string
    screenHeigth: number | string
    deviceType: string
}

const initialState: screenStateT = {
    screenWidth: window.innerWidth,
    screenHeigth: window.innerHeight,
    deviceType: getDeviceType(window.innerWidth),
}
function getDeviceType(width: number): string {
    if (width <= 480) {
        return device.MOBILE;
    } else if (width <= 768) {
        return device.PAD;
    } else {
        return device.PC;
    }
}
export const screen = createSlice({
    name: 'screen',
    initialState,
    reducers: {
        setScreenWidth: (state, action) => {
            state.screenWidth = action.payload;
            state.deviceType = getDeviceType(action.payload);
        },
        setScreenHeight: (state, action) => {
            state.screenHeigth = action.payload;
        },
    }
})


//导出方法reducers
export const { setScreenWidth, setScreenHeight } = screen.actions

//默认导出
export default screen.reducer